<style lang="scss">
#geneIndex{
    width:1200px;
    margin: 0 auto;
       #geneHeader{
        width:100%;
        background:#fff;
        height:90px;
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .logo-content{
            width:372px;
            height:100%;
            img{
                display: inline-block;
                margin:10px;
                height:70px;
                cursor: pointer;
            }
        }
        .search-content{
            width:calc(100% - 372px);
            height: 100%;
            .searc-box{
                width:calc(100% - 50px);
                display: inline-block;
                text-align:left;
                margin-left: 50px;
                height: 100%;
                line-height: 90px;
                .inline-input{
                    width:50%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
<template>
    <div id="geneIndex">
        <div id="geneHeader">
            <div class="left logo-content">
                <img @click="goHome" src="/static/image/logo.png" />
            </div>
            <div class="right search-content">
                <div class="searc-box">
                    <el-autocomplete  class="inline-input" :autofocus="focus"  v-model="searchGeneStr" :fetch-suggestions="querySearchGene" placeholder="请输入基因名称" trigger-on-focus="false" @select="handleSelect">
                        <i v-if="searchGeneStr"
                            class="el-icon-error el-input__icon"
                            slot="suffix"
                            @click="clearSearchGeneStr">
                        </i> 
                        <template slot-scope="{ item }">
                            <div class="name"><span>{{ item.name }}</span></div>
                        </template>
                    </el-autocomplete>
                    <el-button type="primary" @click="goSearchList" class="inline-button">搜索</el-button>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: 'geneIndex',
    data(){
        return{
            searchGeneStr:"",
        }
    },
    methods:{
        goHome(){
            this.$store.state.searchType = "";
            this.$store.state.searchStr = "";
            this.$store.state.searchId = "";
            sessionStorage.setItem("searchId","");
            sessionStorage.setItem("searchStr","");
            this.$router.push("/home");
        },
        querySearchGene(queryString,cb){
            this.doGeneSearch(function(data){
                if(data.data){
                    cb(data.data);
                }
            });
        },
        //调用搜索接口
        doGeneSearch(cb){
            var obj={
                str:this.searchGeneStr,
            }
            medicine.drugGeneSolrSerachAll(obj).then((data)=>{
                if(data.status == 200){
                    if(cb && typeof(cb) == "function"){
                        cb(data)
                    }
                }
            })
        },
        clearSearchGeneStr(){
            this.searchGeneStr = "";
        },
        goSearchList(){
            if(!this.searchGeneStr){
                return;
            }
            this.$router.push("/geneIndex/geneList?str="+this.searchGeneStr);
        },
        handleSelect(obj){
            this.$router.push("/geneIndex?geneId="+obj.id);
        }
    }
}
</script>


